<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
            border-spacing: 0;
            margin-top: 10px;
        }
        td{
            width: 75px;
            height: 20px;
            border:1px solid black;
        }
      
    </style>
</head>
<body>
    <input type="text" id="rows">行<input type="text" id=cols>列<button id="btn">点击生成</button>
    <button id="addRow">增加行</button><button id="addCol">增加列</button><button id="delRow">删除行</button><button id="delCol">删除列</button>

</body>
<script>
    var _row,_col;
    var bd=document.querySelector('body');
    var tble=document.createElement('table');
    var tbdy=document.createElement('tbody');
    tble.appendChild(tbdy);
    bd.appendChild(tble);
    // 生成表格
    var tb=document.querySelector("tbody");
    btn.onclick=function(){
         _row=rows.value;
         _col=cols.value;
       for(var i=0;i<_row;i++){
        var delBtn=document.createElement('button');
        delBtn.innerText="delete";
        var copyBtn=document.createElement('button');
        copyBtn.innerText="copy"
           var tr=document.createElement('tr');
           for(var j=0;j<_col;j++){
               var td=document.createElement('td');
               td.setAttribute("contenteditable","true");
               tr.appendChild(td);

           }
           tr.appendChild(copyBtn);
           tr.appendChild(delBtn);
           tb.appendChild(tr);
       }
    }
    //增加行
    addRow.onclick=function(){
        var tr=document.createElement('tr');
        var delBtn=document.createElement('button');
        delBtn.innerText="delete";
        var copyBtn=document.createElement('button');
        copyBtn.innerText="copy"
        for(var i=0;i<_col;i++)
        {

            var td=document.createElement('td');
            td.setAttribute("contenteditable","true");
            tr.appendChild(td);
        }
        tr.appendChild(copyBtn)
        tr.appendChild(delBtn)
        tb.appendChild(tr);
        _row++;
    }
    //删除行
    delRow.onclick=function(){
        var deledR=document.querySelector('tbody tr:last-child');
        deledR.remove();
        _row--;
    }
    //增加列
    addCol.onclick=function(){

        var tr=document.querySelectorAll('tr');       
        var old_td=document.querySelectorAll('tr td:first-of-type')
        for(var i=0;i<tr.length;i++){ 
            var new_td=document.createElement('td');
            new_td.setAttribute("contentEditable","true");
            tr[i].insertBefore(new_td,old_td[i]);  
        }
        _col++;
    }
    //删除列
    delCol.onclick=function(){
        var deledC=document.querySelectorAll('tr td:last-of-type')
        for(var i=0;i<_row;i++)
        {
            deledC[i].remove();
        }
        _col--;
    }
    //copy行
    setInterval(function(){
         var trQueue=document.querySelectorAll('tr');
         trQueue.length>0&&trQueue.forEach(function(curTr,index){
         document.querySelector("tr:nth-of-type("+(index+1)+") button:nth-last-of-type(2)").onclick=function(){
            tb.appendChild(curTr.cloneNode(true));
         }    
    })
    },1000)
    //delete行
    setInterval(function(){
         var trQueue=document.querySelectorAll('tr');
         trQueue.length>0&&trQueue.forEach(function(curTr,index){
         document.querySelector("tr:nth-of-type("+(index+1)+") button:nth-last-of-type(1)").onclick=function(){
            curTr.remove();
         }    
    })
    },1000)
    

</script>
</html>